<!-- 登录弹窗 -->
<template>
  <c-popup v-model="popupVisible">
    <view class="login flex flex-col">
      <image src="@/assets/images/logo.png" mode="scaleToFill" />
      <text class="login__title">欢迎来到央国企选岗系统</text>
      <c-button
        :open-type="checked ? 'getPhoneNumber' : undefined"
        custom-class="w-full"
        block
        @click="handleClick"
        @getphonenumber="decryptPhoneNumber"
        >一键登录</c-button
      >
      <text class="login__tips">未注册过的用户将直接为您创建账号</text>

      <view class="login__check flex items-center justify-center">
        <wd-icon
          v-if="!checked"
          name="check-circle"
          color="rgba(62,70,84,0.55)"
          size="28rpx"
          @click="checked = !checked"
        ></wd-icon>
        <wd-icon
          v-else
          name="check-circle-filled"
          size="28rpx"
          color="#FF800E"
          @click="checked = !checked"
        ></wd-icon>
        <text class="ml-1" @click="checked = !checked">我已阅读并同意</text>
        <text class="login__check--link" @click="handleAgreement">《用户协议》</text>
      </view>
    </view>
  </c-popup>
</template>

<script lang="ts" setup>
  import { navigateTo } from '@/utils/router';
  import { ApiWeixinMiniAppLogin } from '@/service/user';
  import { useUserStore } from '@/store/user';
  import { emitter } from '@/utils/mitt';

  const popupVisible = ref(false);
  const checked = ref(false);
  const userStore = useUserStore();
  const emit = defineEmits(['reload']);

  const open = () => {
    popupVisible.value = true;
  };

  const handleClick = () => {
    console.log(checked.value);
    if (!checked.value) {
      uni.showToast({
        title: '请先阅读并同意服务协议 并勾选下方选项',
        icon: 'none',
      });
      return;
    }
  };
  const handleAgreement = () => {
    navigateTo('/pages/userServiceAgreement/index');
  };
  const decryptPhoneNumber = (data) => {
    uni.showLoading({
      title: '登录中',
      mask: true,
    });
    uni.login({
      provider: 'weixin',
      success: (res) => {
        ApiWeixinMiniAppLogin({
          phoneCode: data.code,
          loginCode: res.code,
          state: Number(Math.random().toString().substring(2, 10) + Date.now()).toString(16),
        })
          .then((res: any) => {
            popupVisible.value = false;
            userStore.setLoginInfo({ ...res.data, token: res.data.accessToken });
            emit('reload');
            if (!res.data.isUser) {
              userStore.getUserInfo();
              return;
            }
            uni.getUserInfo({
              provider: 'weixin',
              success: ({ userInfo }) => {
                userStore.updateUserInfo({
                  avatar: userInfo.avatarUrl,
                  nickname: userInfo.nickName || '微信用户',
                });
              },
              fail: (err) => {
                console.log(err);
              },
            });

            uni.showToast({
              title: '登录成功',
              icon: 'success',
            });
          })
          .finally(() => {
            uni.hideLoading();
          });
      },
    });
  };

  onMounted(() => {
    popupVisible.value = !userStore.isLogined;
    emitter.on('toggleLoginPopup', (val) => {
      popupVisible.value = val;
    });
  });

  defineExpose({
    open,
  });
</script>

<style lang="scss" scoped>
  .login {
    padding: 46rpx 40rpx;
    text-align: center;

    image {
      width: 112rpx;
      height: 112rpx;
      margin: 0 auto;
    }
    &__title {
      color: $uni-color-title;
      margin: 32rpx 0 80rpx;
      font-weight: 500;
      font-size: 32rpx;
    }

    &__tips {
      font-size: 28rpx;
      color: $uni-color-subtitle;
      margin: 32rpx 0 110rpx;
    }

    &__check {
      color: $uni-color-subtitle;

      &--link {
        color: $uni-color-primary;
      }
    }
  }
</style>
